<template>
  <div>
    <!--分享模块-->
    <div class="shares" :style="changeShares">
      <div class="innerShares">
        <div class="send2Fri">
          <div class="sendBtn" @click="share">
            <span></span>
            <span>发送给微信好友</span>
          </div>
        </div>
        <div class="cancelSend" @click="cancelShare">取消分享</div>
      </div>
    </div>
    <!-- 分享遮罩 -->
    <div class="share_shade" v-if="isShowShareShade" @click="isShowShareShade = false">
      <div class="arrows"></div>
      <div class="neirong">
        <div class="gesture">点击右上角分享到</div>
        <div class="share_pic share_weixin">朋友圈</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      // 是否显示分享遮罩
      isShowShareShade: false,
      // 分享内容
      shareContent: {
        title: "好友位置",
        image: "https://files.ckiosk.cn/wxshare/image/huidi.png",
        url: location.href.split("&")[0]
      }
    };
  },
  computed: {
    changeShares() {
      if (this.$store.state.isBigScreen) {
        if (this.$store.state.isShowShareMap) {
          return {
            bottom: "42px"
          };
        } else {
          return {
            bottom: "-500px"
          };
        }
      } else {
        if (this.$store.state.isShowShareMap) {
          return {
            bottom: "0px"
          };
        } else {
          return {
            bottom: "-500px"
          };
        }
      }
    }
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 取消分享
    cancelShare() {
      this.$store.commit("updateIsShowSetPoint", true);
      this.$store.commit("updateIsShowShareMap", false);
    },
    // 分享
    share() {
      this.isShowShareShade = true;
      this.shareMessage();
      this.shareTimeline();
    },
    // 分享给微信好友
    shareMessage() {
      wx.onMenuShareAppMessage({
        title: this.shareContent.title, // 分享标题
        desc: `${document.title}  
${this.$store.state.clickAreaName}   ${this.$store.state.clickAreaFloorname}`, // 分享描述
        link: this.replaceUrl(this.shareContent.url),
        imgUrl: this.shareContent.image, // 分享图标
        type: "link", // 分享类型,music、video或link，不填默认为link
        dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
        success: function() {
          this.isShowShareShade = false;
          this.cancelShare();
        },
        cancel: function() {}
      });
    },
    // 分享到朋友圈
    shareTimeline() {
      wx.onMenuShareTimeline({
        title: this.shareContent.title, // 分享标题
        desc: `${document.title}  
${this.$store.state.clickAreaName}   ${this.$store.state.clickAreaFloorname}`, // 分享描述
        link: this.replaceUrl(this.shareContent.url),
        imgUrl: this.shareContent.image, // 分享图标
        type: "link", // 分享类型,music、video或link，不填默认为link
        dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
        success: function() {
          this.isShowShareShade = false;
          this.cancelShare();
        },
        cancel: function() {}
      });
    },
    // 分享生成的链接形式
    replaceUrl(url) {
      if (url.indexOf("?") == -1) {
        if (this.$store.state.clickData.floorID) {
          url = url + "?floorid=" + this.$store.state.clickData.floorID;
        } else {
          return;
        }
        if (this.$store.state.clickData.nodeID) {
          url = url + "&mark=" + this.$store.state.clickData.nodeID;
        } else {
          return;
        }
      } else {
        if (this.$store.state.clickData.floorID) {
          url = this.replaceArg(
            url,
            "floorid",
            this.$store.state.clickData.floorID
          );
        } else {
          return;
        }
        if (this.$store.state.clickData.nodeID) {
          url = this.replaceArg(
            url,
            "mark",
            this.$store.state.clickData.nodeID
          );
        } else {
          return;
        }
      }
      return url;
    },
    //数组替换
    replaceArg(url, arg, arg_val) {
      var pattern = arg + "=([^&]*)";
      var replaceText = arg + "=" + arg_val;
      if (url.match(pattern)) {
        var tmp = "/(" + arg + "=)([^&]*)/gi";
        tmp = url.replace(eval(tmp), replaceText);
        return tmp;
      } else {
        if (url.match("[?]")) {
          return url + "&" + replaceText;
        } else {
          return url + "?" + replaceText;
        }
      }
      return url + "\n" + arg + "\n" + arg_val;
    }
  },
  components: {}
};
</script>

<style lang='less'>
/*分享模块 */
.shares {
  width: 354px;
  height: 110px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  transition: all 0.5s;
  .innerShares {
    width: 100%;
    height: 100%;
    border-radius: 3px 3px 0 0;
    padding: 0 0.3rem;
    background-color: #fff;
    box-sizing: border-box;
    .send2Fri {
      width: 100%;
      height: 74.5px;
      align-items: center;
      display: -webkit-flex;
      justify-content: center;
      display: -webkit-flex;
      border-radius: 3px 3px 0 0;
      .sendBtn {
        width: 197.5px;
        height: 34px;
        border-radius: 17px;
        font-size: 13.5px;
        color: white;
        align-items: center;
        display: -webkit-flex;
        justify-content: center;
        display: -webkit-flex;
        background-color: #fa7d34;
        span:nth-child(1) {
          width: 14px;
          height: 14px;
          display: inline-block;
          background-image: url("../assets/images/icon_fenxiangbai.png");
          background-size: 14px;
          background-repeat: no-repeat;
          margin-right: 10px;
        }
        span:nth-child(2) {
          font-size: 13.5px;
        }
      }
    }
    .cancelSend {
      width: 100%;
      height: 35px;
      font-size: 11.5px;
      color: #595959;
      align-items: center;
      display: -webkit-flex;
      justify-content: center;
      display: -webkit-flex;
      border-top: 1px solid #ececec;
    }
  }
}

.share_shade {
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background-color: #000;
  position: fixed;
  top: 0;
  z-index: 1100;
  .arrows {
    width: 55.5px;
    height: 45px;
    background: url("../assets/images/arrow.png") center center no-repeat;
    background-size: contain;
    float: right;
    margin-top: 5px;
    margin-right: 27.5px;
  }
  .neirong {
    width: 150px;
    height: 75px;
    position: absolute;
    top: 60px;
    right: 0px;
    color: #ffffff;
    .gesture {
      font-size: 12px;
      width: 100px;
      height: 100px;
      float: left;
    }
    .gesture::before {
      content: "";
      display: block;
      width: 26px;
      height: 45.5px;
      position: relative;
      top: 0;
      left: 50px;
      background: url("../assets/images/finger.png") center center no-repeat;
      background-size: contain;
      margin-bottom: 7.5px;
    }
    .share_pic {
      font-size: 12px;
      width: 50px;
      height: 100px;
      float: right;
      text-align: center;
    }
    .share_pic::before {
      content: "";
      display: block;
      width: 27px;
      height: 27px;
      position: relative;
      top: 15px;
      left: 10px;
      margin-bottom: 25px;
    }
    .share_weixin::before {
      background: url("../assets/images/WeChat.png") center center no-repeat;
      background-size: cover;
    }
  }
}
</style>
